<template>
    <div class="loginBackground flex jc-center ai-center vh100" :class="{focus: isFocus}">
        <loading :load="loading"></loading>
        <div class="main">
            <h1>注册</h1>
            <form @submit.prevent="register">
                <label>
                    <input type="text" v-model="model.username">
                    <span class="placeholder" v-show="model.username === ''">用户名</span>
                </label>
                <label>
                    <input type="password" v-model="model.password">
                    <span class="placeholder" v-show="model.password === ''">密码</span>
                </label>
                <button></button>
            </form>
            <div class="doBox">
                <div class="submit flex ai-center jc-center" @click="register">注册</div>
                <router-link to="/login">已有账号？点击登录</router-link>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                model: {
                    username: '',
                    password: '',
                },
                hasSubmit: false,

                isFocus: false,
                loading: false,
            }
        },
        methods: {
            async register() {
                if (!this.hasSubmit) {
                    this.hasSubmit = true;
                    if (this.model.username.length <  3) {
                        this.hasSubmit = false;
                        this.$emit('alert', '用户名不能小于3个字符！')
                        return
                    } else if (this.model.password.length < 6) {
                        this.hasSubmit = false;
                        this.$emit('alert', '密码长度不能小于6位！')
                        return
                    }
                    this.loading = true;
                    await this.$http.post('/register', this.model);
                    this.loading = false;
                    this.$router.push('/login')
                    this.$emit('alert', '注册成功！')
                }
            }
        }
    }
</script>

<style scoped lang="scss" src="../css/login.scss"></style>